<template>
  <div class="bid-info">
    <h3>
      投标截止日期：{{bidVendor.tenderEtime}}
      <el-button size="mini" type="primary" @click="tenderQuote(0)" v-if="quoteStatus===0">暂存报价</el-button>
      <el-button size="mini" type="primary" @click="tenderQuote(1)" v-if="quoteStatus===0">提交投标</el-button>
      <el-button size="mini" @click="showEdit" v-if="quoteStatus===0">技术澄清</el-button>
    </h3>
    <div class="info-div">
      <div class="info-title">
        <span>投标报价表</span>
      </div>
      <el-table :data="vendorMaterial" border>
        <el-table-column label="产品编码" align="center" prop="materialCode" width="120px"></el-table-column>
        <el-table-column label="产品名称" align="center" prop="materialName" width="160px"></el-table-column>
        <el-table-column label="规格型号" align="center" prop="materialSpec"></el-table-column>
        <el-table-column label="采购单位" align="center" prop="materialUnit"></el-table-column>
        <el-table-column label="招标数量" align="center" prop="planQty"></el-table-column>
        <el-table-column label="供货区域" align="center" prop="purOrgName"></el-table-column>
        <el-table-column label="工厂" align="center" prop="factoryName" width="170px"></el-table-column>
        <el-table-column label="含税单价" align="center" prop="lastTaxPrice" width="120px;">
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.lastTaxPrice" style="text-align:right;"></el-input>
              </template>
        </el-table-column>
        <!-- <el-table-column label="含税总价" align="center" prop="remarks"></el-table-column> -->
        <el-table-column label="税率" align="center" prop="taxRate" width="100px;">
            <template slot-scope="scope">
              <el-select v-model="scope.row.taxRate" placeholder="">
                <el-option v-for="item in taxRates" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
        </el-table-column>
        <el-table-column label="付款条件" align="center" prop="paymentTypeName" width="280px;">
            <template slot-scope="scope">
              <el-select v-model="scope.row.paymentTypeName" placeholder="">
                <el-option v-for="item in paymentTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
        </el-table-column>
        <el-table-column label="付款方式" align="center" prop="paymentTermsName" width="160px;">
            <template slot-scope="scope">
              <el-select v-model="scope.row.paymentTermsName" placeholder="">
                <el-option v-for="item in paymentTerms" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
        </el-table-column>
        <el-table-column label="质保期" align="center" prop="qualityTime"></el-table-column>
        <el-table-column label="交货期" align="center" prop="deliveryDate" width="100px;"></el-table-column>
      </el-table>
    </div>
    <div class="info-div">
      <div class="info-title">
        <span>资料上传</span>
      </div>
      <div class="info-text w50 mt20">
        <span class="text-value" v-if="quoteStatus===0">
            <el-upload class="upload-file" ref="upload" 
              :action="this.lib.config.host.system + '/common/fileupload/upload'" :data=fileData
              :limit="1" :on-success="res=>{uploadSuccess(res,'qualificationFileId')}">
              <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
        </span>
        <span class="text-value" v-if="quoteStatus===1">
          <a href="javascript:;" @click="downloadFile(vendorQuote.aptitudeFilePath,vendorQuote.aptitudeFileName)" class="download_color">{{vendorQuote.aptitudeFileName}}</a>
        </span>
      </div>
    </div>
    <div class="info-div">
      <div class="info-title">
        <span>投标文件上传</span>
      </div>
      <div class="info-text w50 mt20">
        <span class="text-label">
            商务方案：
        </span>
        <span class="text-value" v-if="quoteStatus===0">
            <el-upload class="upload-file" ref="upload" 
              :action="this.lib.config.host.system + '/common/fileupload/upload'" :data=fileData
              :limit="1" :on-success="res=>{uploadSuccess(res,'businessFileId')}">
              <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
        </span>
        <span class="text-value" v-if="quoteStatus===1">
          <a href="javascript:;" @click="downloadFile(vendorQuote.businessFilePath,vendorQuote.businessFileName)" class="download_color">{{vendorQuote.businessFileName}}</a>
        </span>
      </div>
      <div class="info-text w50 mt20">
        <span class="text-label">
            技术方案：
        </span>
        <span class="text-value" v-if="quoteStatus===0">
            <el-upload class="upload-file" ref="upload" 
              :action="this.lib.config.host.system + '/common/fileupload/upload'" :data=fileData
              :limit="1" :on-success="res=>{uploadSuccess(res,'techFileId')}">
              <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
        </span>
        <span class="text-value" v-if="quoteStatus===1">
          <a href="javascript:;" @click="downloadFile(vendorQuote.techFilePath,vendorQuote.techFileName)" class="download_color">{{vendorQuote.techFileName}}</a>
        </span>
      </div>
    </div>

    <el-dialog title="技术澄清" :visible.sync="editVisible" class="dialog-form" width="500px">
      <div class="info-text w100">
        <span class="text-label">
          技术澄清：
        </span>
        <span class="text-value">
            <el-input v-model="remarks" type="textarea"></el-input>
        </span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="!remarks" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import qs from 'qs';
  export default {
    props:['stepData'],
    computed:{
        status(){
            let checkStatus=this.stepData.bidMainDto.ruleCheckStatus ===1 && this.stepData.bidMainDto.submitCompStatus === 0;
            let dataStatue=Object.keys(this.ruleForm).every(k=>{return !!this.ruleForm[k]});
            return checkStatus && dataStatue
        }
    },
    data() {
      return {
        // 定义附件的业务模块和业务动作
        fileData: {
          busAction: "TENDER_QUOTE_QUALIFICATION_FILE",
          tableName: "CT_PS_VENDORS"
        },
        editVisible:false,
        bidVendor:{},
        vendorQuote:{},
        paymentTerms:[],
        paymentTypes:[],
        taxRates:[],
        vendorMaterial:[],
        ruleForm:{
          qualificationFileId:'',
          businessFileId:'',
          techFileId:''
        },
        remarks:''
      };
    },
    computed:{
        quoteStatus(){
            return this.stepData.bidVendor.quoteStatus===3?0:1;
        }
    },
    created(){
       this.queryVendorMaterial();
       this.getMaxNewVendorQuote();
       this.bidVendor=this.stepData.bidVendor;
    },
    mounted(){
      //税率
      this.axios.post(this.lib.config.host.masterData + '/common/sysdictionary/getDicItems/TAX_RATE').then((res)=>{
        this.taxRates=res.data;
      })
      //付款条件 
      this.axios.post(this.lib.config.host.masterData + '/common/sysdictionary/getDicItems/PAYMENT_TERMS').then((res)=>{
        this.paymentTerms=res.data;
      })
      //付款方式
      this.axios.post(this.lib.config.host.masterData + '/common/sysdictionary/getDicItems/PAYMENT_TYPE').then((res)=>{
        this.paymentTypes=res.data;
      })
    },
    methods: {      
      queryVendorMaterial(){
        //投标报价表
        this.axios.post(`${this.lib.config.host.bidtender}/bidmgt/tender/loadQuoteDetail/${this.$route.query.bidMainId}/0`).then((res) => {
          this.vendorMaterial=res.data;
        }).catch(function (error) {
          console.log(error);
        });
      },
      getMaxNewVendorQuote(){
        //供应商最新报价
        this.axios.post(`${this.lib.config.host.bidtender}/bidmgt/tender/getMaxNewVendorQuote/${this.$route.query.bidMainId}/${this.$route.query.id}`).then((res) => {
          this.vendorQuote=res.data;
        }).catch(function (error) {
          console.log(error);
        });
      },
      showEdit(){
        this.editVisible=true;
      },
      submitForm(){
        let data={
          ids:this.ids.map(item=>{return item.id}),
          content:this.remarks
        }
        this.axios.post(`${this.lib.config.host.bidtender}/bidmgt/bid/techInstruction/${this.$attrs.data.id}`,data).then((res) => {
          if(res.data.success){
            this.$emit('initList');
            this.getqueryEvaStation();
            this.$message.success('提交成功！');
          }
        }).catch(function (error) {
            console.log(error);
        });
      },
      tenderQuote(type){
        this.$confirm('确认提交投标？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let formData=this.vendorMaterial.map(item=>{
            let row={
              id:item.id,
              lastTaxPrice:item.lastTaxPrice,
              planQty:item.planQty,
              taxRate:item.taxRate,
              paymentTypeName:item.paymentTypeName,
              paymentTermsName:item.paymentTermsName
            };
            return row;
          })
          if(formData.some(item=>{return Object.values(item).some(val=>{return !val})})){
            this.$message({
              type: 'info',
              message:'表格数据填写不完整!'
            });
            return;
          }
          if(Object.values(this.ruleForm).some(val=>{return !val})){
            this.$message({
              type: 'info',
              message:'请上传相关文件!'
            });
            return;
          }
          let data={
            ...this.ruleForm,
            quoteList:[...formData]
          }
          this.axios.post(`${this.lib.config.host.bidtender}/bidmgt/tender/tenderQuote/${this.$route.query.bidMainId}/${this.$route.query.id}/${type}`,data).then((response)=>{
            this.$message({
              type: 'success',
              message:'提交成功!'
            });
          });
        }).catch(() => {
          console.log(222)
        });
      },
      uploadSuccess: function (response,type) {
          //附件上传成功回调
          this.ruleForm[type] = response.id;
      },
       // 下载附件
      download(filePath, fileName) {
          this.downloadFile(filePath, fileName);
      }
    }
  }

</script>
